<template>
  <div class="cart-container">
    <div class="cart-header">
      <h2>我的购物车</h2>
      <p>共 {{ carts.length }} 件商品</p>
    </div>
    
    <div class="cart-items" v-if="carts.length > 0">
      <el-card v-for="(item, index) in carts" :key="index" class="cart-item">
        <div class="item-content">
          <div class="item-info">
            <div class="user-info">
              <el-avatar :size="32" icon="el-icon-user"></el-avatar>
              <span class="username">{{ item.user.username }}</span>
            </div>
            <div class="product-info">
              <h3>{{ item.product.productName }}</h3>
              <div class="quantity">
                数量: <span class="quantity-num">{{ item.quantity }}</span>
              </div>
            </div>
          </div>
          <div class="item-meta">
            <div class="create-time">
              下单时间: {{ new Date(item.createTime).toLocaleString() }}
            </div>
          </div>
        </div>
      </el-card>
    </div>
    
    <div class="empty-cart" v-else>
      <el-empty description="购物车是空的，快去选购商品吧！">
        <el-button type="primary">去购物</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {findCart} from "@/assets/cart.js";

const userId=localStorage.getItem("userId")
const carts=ref([])
function getCart(){
  findCart(userId).then(res=>{
      carts.value=res.data
  })
}
getCart()
</script>

<style scoped>
.cart-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.cart-header {
  margin-bottom: 30px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.cart-header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.cart-header p {
  margin: 10px 0 0;
  color: #909399;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cart-item {
  transition: all 0.3s ease;
}

.cart-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-info {
  flex: 1;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.username {
  margin-left: 10px;
  color: #606266;
}

.product-info h3 {
  margin: 0 0 10px;
  color: #303133;
  font-size: 16px;
}

.quantity {
  color: #606266;
}

.quantity-num {
  color: #409EFF;
  font-weight: bold;
}

.item-meta {
  text-align: right;
}

.create-time {
  color: #909399;
  font-size: 14px;
}

.empty-cart {
  margin-top: 100px;
  text-align: center;
}
</style>